<template>
    <div class="AddFl">
        <h2>患者跟进</h2>
        <div class="operatingBox">
            <el-button type="info" icon="el-icon-arrow-left" size="small" @click="goBackFl">返回</el-button>
        </div>
        <div class="formBox">
            <!-- <el-button type="info" size="small" icon="el-icon-arrow-left" @click="backToPrev">
                                        返回</el-button> -->
            <el-form size="small" class="addForm">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">类型</span>
                            </span>
                            <el-select v-model="formData.type" placeholder="请选择" style="width: 100%;">
                                <el-option label="电话" value="0"></el-option>
                                <el-option label="邮件" value="1"></el-option>
                                <el-option label="信息" value="2"></el-option>
                                <el-option label="拜访" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">标题</span>
                            </span>
                            <el-input v-model="formData.title"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">跟进日期</span>
                            </span>
                            <el-input v-model="formData.date"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">状态</span>
                            </span>
                            <el-select v-model="formData.status" placeholder="请选择" style="width: 100%;">
                                <el-option label="新跟进" value="0"></el-option>
                                <el-option label="进行中" value="1"></el-option>
                                <el-option label="已完成" value="2"></el-option>
                                <el-option label="已取消" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">患者</span>
                            </span>
                            <el-input class="put" v-model="formData.name" disabled>

                            </el-input>
                         
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">下次跟进</span>
                            </span>
                            <el-input v-model="formData.nextDate"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="subBtn">
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button type="info" size="small" @click="goBackFl">取消</el-button>
                </el-form-item>
            </el-form>

        </div>



         
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    name: 'AddPatientFl',
    components: {
     
    },
    computed: {
        ...mapState("editPatient", ['title', 'rowData'])
    },
    data() {
        return {
            //dialog是否打开
            dialogTableVisible: false,
            followData: [{
                id: "1",
                type: "私海",
                name: "小",
                sex: "女",
                age: "6",
                phone: "123",
                idCard: "12342",
                medicareNum: "456",
                province: "北京",
                address: "北京",
                responsible: "111",
                createTime: "2022",
                updateTime: "",
                sysDiagnosislist: "",
                status: "有效",
                user_id: 0,

            }],//dialog表格数据

            //表单数据
            formData: {
                 // id: 1,
                patientId: 1,
                type: "",
                title: "",
                name: "",
                chargePerson: "",
                // date: "",
                nextDate: "",
                createTime: "",
                status: "",
                description: "",   
                userId: sessionStorage.getItem("userID"),
                // updateTime: ""
            },
            userId:sessionStorage.getItem("userID"),

        };
    },


    mounted() {
        this.formData = this.rowData
        console.log('this.rowData-----',this.rowData);
        if (this.formData.status == 0) {
            this.formData.status = "新跟进"
        } else if (this.formData.status == 1) {
            this.formData.status = "进行中"
        } else if (this.formData.status == 2) {
            this.formData.status = "已完成"
        } else if (this.formData.status == 3) {
            this.formData.status = "已取消"
        }
        if (this.formData.type == 0) {
            this.formData.type = "电话"
        } else if (this.formData.type == 1) {
            this.formData.type = "邮件"
        } else if (this.formData.type == 2) {
            this.formData.type = "信息"
        } else if (this.formData.type == 3) {
            this.formData.type = "拜访"
        }
        this.followData.patientId=this.rowData.patientId
    },

    methods: {
        goBackFl() {
            this.$router.push("/patient/paFollow")
        },


        //保存按钮功能   修改
        async onSubmit() {
            this.formData.userId=this.userId
            // console.log('this.formData-------',this.formData);
            if (this.formData.status == "新跟进") {
                this.formData.status = 0
            } else if (this.formData.status == "进行中") {
                this.formData.status = 1
            } else if (this.formData.status == "已完成") {
                this.formData.status = 2
            } else if (this.formData.status == "已取消") {
                this.formData.status = 3
            }
            if (this.formData.type == "电话") {
                this.formData.type = 0
            } else if (this.formData.type == "邮件") {
                this.formData.type = 1
            } else if (this.formData.type == "信息") {
                this.formData.type = 2
            } else if (this.formData.type == "拜访") {
                this.formData.type = 3
            }
            console.log(this.formData);
            let res = await this.$api.patients.editFollow(this.formData)
            if (res.data.code === 200) {
                //跳转到列表页面
                this.$router.push("/patient/paFollow")
                //提示
                this.$message({
                    message: '修改成功',
                    type: 'success'
                });
            } else {
                console.log("修改失败------------");
                this.$message.error('修改失败');
            }

        },

    },
};
</script>

<style scoped>
h2 {
    margin: 15px;

}

.operatingBox {
    background-color: white;
    margin: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #ccc;
    border-radius: 5px;
}

.el-button {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.formBox {
    background-color: white;
    margin-left: 15px;
    margin-right: 15px;

}

.el-form {
    margin: 15px;

}


.labelText {
    text-align: left;
    float: left;
    font-size: 14px;
    font-weight: 600;
    color: black;
}




.put {
    position: relative;
}

.btn {
    position: absolute;
    right: 0px;
    bottom: -3px;
}

.subBtn {
    margin-top: 20px;
    padding-bottom: 20px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 3px solid #ccc;
    border-bottom: 1px solid #ccc;
    /* border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; */
}

.input-with-select {
    width: 200px;
}
</style>